// import { useRef, useEffect } from 'react'
import CustomRef from '../DOC/CustomRef'
function Star() {
  return <>
    Star
    <div
      onMouseEnter={() => console.log('onMouseEnter (parent)')}
      onMouseLeave={() => console.log('onMouseLeave (parent)')}
      style={{ padding: 20, backgroundColor: '#ddd' }}
    >
      {/* <FirstChild />
      <SecondChild />
      <FocusExample /> */}
      <CustomRef />

    </div>
  </>
}

function FirstChild() {
  return <div
    onPointerDown={e => console.log('onPointerDown (first child)', e)}
    onPointerEnter={e => console.log('onPointerEnter (first child)', e)}
    onPointerLeave={e => console.log('onPointerLeave (first child)', e)}
    onPointerMove={e => console.log('onPointerMove (first child)', e)}
    onPointerUp={e => console.log('onPointerUp (first child)', e)}
    style={{ padding: 20, backgroundColor: 'lightyellow' }}
  >
    First child
  </div>
}

function SecondChild() {
  return <div
    onPointerDown={e => console.log('onPointerDown (second child)', e)}
    onPointerEnter={e => console.log('onPointerEnter (second child)', e)}
    onPointerLeave={e => console.log('onPointerLeave (second child)', e)}
    onPointerMove={e => console.log('onPointerMove (second child)', e)}
    onPointerUp={e => console.log('onPointerUp (second child)', e)}
    style={{ padding: 20, backgroundColor: 'lightblue' }}
  >
    Second child
  </div>
}


export function FocusExample() {
  return (
    <div
      tabIndex={1}
      onFocus={(e) => {
        if (e.currentTarget === e.target) {
          console.log('focused parent');
        } else {
          console.log('focused child', e.target instanceof HTMLElement ? e.target.getAttribute('name') || 'unknown' : 'unknown');
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // 在子元素之间切换焦点时不会触发
          console.log('focus entered parent');
        }
      }}
      onBlur={(e) => {
        if (e.currentTarget === e.target) {
          console.log('unfocused child', e.target instanceof HTMLElement ? e.target.getAttribute('name') || 'unknown' : 'unknown');
          if (!e.currentTarget.contains(e.relatedTarget)) {
            // 在子元素之间切换焦点时不会触发
            console.log('focus left parent');
          }
        }
      }}
    >
      <label style={{ width: 150 }}>
        First name:
        <input name="firstName"
          onKeyDown={e => console.log('first onKeyDown', e.key, e.code)}
          onKeyUp={e => console.log('first onKeyUp', e.key, e.code)} />
      </label>
      <br />
      <label style={{ width: 150 }}>
        Last name:
        <input name="lastName"
          onKeyDown={e => console.log('last onKeyDown', e.key, e.code)}
          onKeyUp={e => console.log('last onKeyUp', e.key, e.code)}
        />
      </label>
    </div>
  );
}

// function CustomRef() {
//   const ref = useRef<HTMLDivElement>(null);

//   useEffect(() => {
//     const node = ref.current;
//     console.log('Attached', node);

//     return () => {
//       console.log('Clean up', node);
//     };
//   }, []);

//   return <div ref={ref}> CustomRef </div>;
// }

export default Star;
